<template>
    <div v-if="filminfo">
        <titleheader v-top :title="filminfo.name"></titleheader>
        <div class="big_image" :style="{backgroundImage:'url('+filminfo.poster+')'}" style="width: 100%;height: 166px;background-size: cover;background-position: center;">
        </div>
        <div class="jianjie">
            <div class="jianjie_fluid">
                <div class="title_and_grade">
                    <div class="title">{{filminfo.name}}<span style="width: 16px;height: 11px; background: #d2d6dc;color: white;margin-left: 5px;">{{filminfo.item.name}}</span></div>
                    <div class="grade" style="color: orange;"><i>{{filminfo.grade}}分</i></div>
                </div>
                <div class="type_time_area">
                    <div class="type">{{filminfo.category}}</div>
                    <div class="time">{{filminfo.premiereAt | timefilter}}上映</div>
                    <div class="area">{{filminfo.nation}} | {{filminfo.runtime}}分钟</div>
                </div>
                <div :class="message_short?'short' : 'long'" style="transition: 0.3s">
                    {{filminfo.synopsis}}
                </div>
                <div class="jiantou" style="text-align: center;" @click.stop="message_short=!message_short">
                    <i :class="message_short?'iconfont iconxiangxiajiantou' : 'iconfont iconxiangshangjiantou'" ></i>
                </div>
                <div class="jiange">
                </div>
            </div>
        </div>
        <div class="hengtiao">
        </div>
        <div class="yanzhirenyuan">
            <div class="yanzhi_header">演职人员</div>
            <yanyuanswiper swipername="yanyuan">
                <div class="swiper-slide" v-for="(item,index) in filminfo.actors">
                    <img :src="item.avatarAddress">
                    <div class="yanyuan_name">
                        {{item.name}}
                    </div>
                    <div class="yanyuan_role">
                        {{item.role}}
                    </div>
                </div>
            </yanyuanswiper>
        </div>
        <div class="jiange">
        </div>
        <div class="hengtiao">
        </div>
        <div class="juzhao">
            <div class="juzhao_title">
                <div>剧照</div>
                <div>全部({{filminfo.photos.length}})></div>
            </div>
            <div>
                <juzhaoswiper swipername="juzhao">
                    <div class="swiper-slide" v-for="(item,index) in filminfo.photos" @click.stop="perImageView(index)">
                        <img :src="item" style="display: block;width: 100%;" >
                    </div>
                </juzhaoswiper>
            </div>
        </div>
    </div>
</template>

<script>
    import vue from 'vue'
    import axios from 'axios'
    import moment from 'moment'
    import yanyuanswiper from './detail/yan_yuan_swiper'
    import juzhaoswiper from './detail/ju_zhao_swiper'
    import titleheader from './detail/header'
    import {ImagePreview,Toast} from 'vant';
    vue.use(Toast)
    vue.filter('timefilter',(mytime)=>{
        return moment(mytime*1000).format(`yyyy-MM-DD`);
    });
    vue.directive('top',{
        inserted(el){
            el.style.display='none';
            window.onscroll=()=>{
                if((document.body.scrollTop || document.documentElement.scrollTop) > 50){
                    el.style.display='block';
                }else{
                    el.style.display='none';
                }
            }

        },
        unbind(){
            window.onscroll=null;
        }
    })
    export default {
        name: "detail",
        components:{
            yanyuanswiper,
            juzhaoswiper,
            titleheader,
        },
        data(){
            return {
                film:{},
                filminfo:null,
                message_short:true,
            }
        },
        mounted() {
            Toast.loading({
                message: '加载中...',
                forbidClick: true,
            });
            console.log('detail 中 filmId',this.$route.query.filmId);
            console.log('detail 中 film',this.$route.query);
            this.film=this.$route.query;
            axios({
                url:`https://m.maizuo.com/gateway?filmId=${this.film.filmId}&k=3863280`,
                headers:{
                    'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16132646121989188333338625","bc":"310100"}',
                    'X-Host': 'mall.film-ticket.film.info',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-Token': 'undefined',
                }
            }).then(res=>{
                console.log(res);
                this.filminfo=res.data.data.film;
                console.log('在 详情页面中 ',this.filminfo);
                console.log('长度',this.filminfo.photos.length);
                Toast.clear();
            })
        },
        methods:{
            perImageView(index){
                ImagePreview({
                    images: this.filminfo.photos,
                    startPosition: index,
                    closeable: true,
                    loop:false,
                    closeIconPosition:'top-left',
                });
            },
        },
    }
</script>

<style scoped>
        .jianjie{width: 100%;background: white;}
        .jianjie_fluid{width: calc(100% - 24px);margin-left: 12px;margin-right: 12px;margin-top: 14px;}
        .title_and_grade{width: 100%;display: flex;justify-content: space-between;height: 14px;font-size: 14px;line-height: 14px;}
        .type_time_area{height: 47px;margin-top: 10px;display: flex;flex-direction: column;justify-content: space-between;}
        .type_time_area>div{font-size: 10px;line-height: 10px;flex-grow: 1;color: #797d82;}
        .short{height: 30px;margin-top: 14px;font-size: 10px;line-height: 15px;color: #797d82;overflow: hidden;text-overflow:ellipsis;white-space: pre-wrap;}
        .long{margin-top: 14px;font-size: 10px;line-height: 15px;color: #797d82;}
        .jiantou>i{color: #d6d8db;font-size: 5px;margin-top: 10px;}
        .jiange{width: 100%;height: 12px;}
        .hengtiao{width: 100%;height: 8px;background: #f4f4f4;}
        .yanzhirenyuan{width: 100%;background: white;}
        .yanzhi_header{margin-top: 15px;margin-left: 12px;font-size: 12px;line-height: 12px;margin-bottom: 16px;}
        .juzhao{width: 100%;}
        .juzhao_title{display: flex;justify-content: space-between;margin-left: 12px;margin-right: 15px;height: 40px;}
        .juzhao_title>div:nth-of-type(1){font-size: 12px;line-height: 40px;color: black;}
        .juzhao_title>div:nth-of-type(2){font-size: 10px;line-height: 40px;color: #7991b6;}
</style>